<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="baidu-site-verification" content="JdMif0g2tL" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>angular</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script src="js/angular.min.js" charset="utf-8"></script>
</head>
<style type="text/css" media="screen">
	*{margin:0;padding: 0;font-size: 16px;outline: none;}
	img{width: 100%;}

	.red{background: red;color: #fff;}
	.green{background: #17a05d;color: #fff;}
	.w200{width: 200px;}
	.h300{height: 300px;}
	.gray{background: #60c4fd;}
	.odd{background: #de5145;}
</style>
<body ng-app="myApp">

<div ng-controller="main">
	<ul>
		<li ng-repeat="color in colors"  ng-class="{red:$first,gray:$even,odd:$odd,green:$last}">
			<p ng-style="{color:color}">【{{color}}】</p>
			<span>[index]-{{$index}}&&</span>
			<span>[first]-{{$first}}&&</span>
			<span>[last]-{{$last}}&&</span>
			<span>[middle]-{{$middle}}&&</span>
			<span>[even]-{{$even}}&&</span>
			<span>[odd]-{{$odd}}&&</span>
		</li>
	</ul>
</div>

<script type="text/javascript">
	var app =angular.module('myApp', []);
	//ng-repeat
	//$index 循环次数，从0开始计算
	//$first 是否是第一次boolean
	//$last 是否是最后一次boolean
	//$middle 是否是中间一次（除了首位）boolean
	//$even 偶数次boolean
	//$odd 基数次boolean
	app.controller('main', ['$scope', function($scope){
		$scope.colors=['red','blue','green','yellow','orange','pink']
	}])
</script>
<script type="text/javascript">
	document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/10+'px';
</script>
</body>
</html>
<!--应该12angular指令11 src动态绑定-->